<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>秋去冬来</title>
    <link rel="stylesheet" href="./assets/css/common.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
  </head>

  <body>
    <!-- 头部区域 -->
    <header id="content-head" class="common-class">
      <div>
        <button class="head-btn__left">LOGO</button>
      </div>
      <div class="content-head__right">
        <span class="head-icon__setting"></span>
        <span class="head-icon__bell"></span>
        <button class="head-btn__right">LOG OUT</button>
      </div>
    </header>

    <!-- 主体区域 -->
    <main id="content-main" class="common-class">
      <!-- 顶部 -->
      <section class="main-header">
        <div class="main-title">
          <div>Audience Overview</div>
          <div>Roseville, CA</div>
        </div>
        <div class="tab-component">
          <div class="tab-bar">
            <div class="tab-item active" data-tab="tab-1">DASHBOARD</div>
            <div class="tab-item" data-tab="tab-2">PROJECTS</div>
            <div class="tab-item" data-tab="tab-3">CALENDAR</div>
            <div class="tab-item" data-tab="tab-4">MAILBOX</div>
            <div class="tab-item" data-tab="tab-5">SETTINGS</div>
          </div>
        </div>
      </section>

      <section class="main-section__one">
        <div class="main-section__one-common">
          <!-- 轮播图区域 -->
          <div id="focus" class="main-section__one-focus">
            <div class="one-focus__arrow-left"></div>
            <div class="one-focus__arrow-right"></div>
            <ul id="focus-ul">
              <li>
                <img src="./assets/images/0.jpg" alt="轮播图1" />
              </li>
              <li>
                <img src="./assets/images/1.jpg" alt="轮播图2" />
              </li>
              <li>
                <img src="./assets/images/3.png" alt="轮播图3" />
              </li>
            </ul>
            <ol class="circle"></ol>
          </div>
        </div>

        <!-- 表格区域 -->
        <div class="main-section__one-common">
          <div class="section__one-table-main">
            <div class="one-table-main__top">
              <span>Support Requests</span>
              <button>View All</button>
            </div>
            <div class="one-table-main__content">
              <table>
                <thead>
                  <tr>
                    <th>TIME</th>
                    <th>USER NAME</th>
                    <th>STATUS</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>9:45pm</td>
                    <td>info@desgin.com</td>
                    <td>
                      <div class="table-main__content-green">Solved</div>
                    </td>
                  </tr>
                  <tr>
                    <td>9:45pm</td>
                    <td>info@desgin.com</td>
                    <td>
                      <div class="table-main__content-green">Solved</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- 图表区域 -->
      <section class="main-section__two">
        <div id="echarts-one"></div>
      </section>

      <section class="main-section__three">
        <div id="echarts-two" class="section__three-echarts-common"></div>
        <div id="echarts-three" class="section__three-echarts-common"></div>
      </section>
    </main>

    <!-- 页脚区域 -->
    <footer id="content-footer" class="common-class">
      <section class="footer-main">
        <button class="head-btn__left">LOGO</button>
        <div class="footer-main__right">
          <ul class="footer-news">
            <li>
              <a href="javascript:;">NEWS</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">CHANNELS</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">OVERVIEW</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">TIMELINE</a>
            </li>
          </ul>
          <ul class="footer-news">
            <li>
              <a href="javascript:;">SPORT</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">CULTURE</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">NATURE</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">MUSIC</a>
            </li>
          </ul>
          <ul class="footer-news">
            <li>
              <a href="javascript:;">WEATHER</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">AUTOS</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">LOCAL</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">SHOP</a>
            </li>
          </ul>
          <ul class="footer-news">
            <li>
              <a href="javascript:;">PUTURE</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">FOOD</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">EARTH</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">TV</a>
            </li>
          </ul>
          <ul class="footer-news">
            <li>
              <a href="javascript:;">TRAVEL</a>
            </li>
            <li class="footer-news__li">
              <a href="javascript:;">RADLO</a>
            </li>
          </ul>
        </div>
      </section>
    </footer>

    <script src="./assets/js/echartOptions.js"></script>
    <script src="./assets/js/echarts.js"></script>
    <script src="./assets//js/myAjax.js"></script>
    <script src="./assets/js/animation.js"></script>
    <script src="./assets/js/index.js"></script>
  </body>
</html>
